<template>
    <div id="exercise">
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'

/**
 * 可视化操作工具
 */


onMounted(()=>{

    /** 1.创建场景对象Scene*/
    var scene = new THREE.Scene();


    /** 2.创建模型 */
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    // 三角形面渲染模式  
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff, //三角面颜色
        wireframe: true,
    }); //材质对象
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh)



    /** 3.光源设置 */
    //点光源
    var pointLights = new THREE.PointLight(0xffffff);
    pointLights.position.set(400, 200, 300); //点光源位置
    scene.add(pointLights); //点光源添加到场景中
    //环境光
    var ambientLights = new THREE.AmbientLight(0x444444);
    scene.add(ambientLights);
   

    /** 4.相机设置 */
    var width = 1200; //窗口宽度
    var height = 800;
    var k = width/height;
    var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(200, 200, 200);// 设置相机位置
    camera.lookAt(scene.position); //设置相机方向（指向的场景对象）

    /**5.创建的渲染对象 */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.getElementById('exercise').appendChild(renderer.domElement);
    // renderer.render(scene, camera);

    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    var axisHelper = new THREE.AxesHelper(450);
    scene.add(axisHelper);

    /**鼠标操作 */
    function render() {
        renderer.render(scene,camera);//执行渲染操作
        requestAnimationFrame(render);
    }
    render();
    new OrbitControls(camera, renderer.domElement);//创建控件对象

    /**可视化辅助工具 */
    const gui = new DAT.GUI();
    gui.add(mesh.position, 'y')
        .min(-30)
        .max(30)
        .step(0.01)
        .name('高')

    gui.add(mesh, 'visible')
    gui.add(material, 'wireframe')
    gui.add(directionalLight, 'intensity', 0, 2.0).name('环境光强度');
    const obj = {
        color:0x00ffff,
    };
    // .addColor()生成颜色值改变的交互界面
    gui.addColor(obj, 'color').onChange(function(value){
        mesh.material.color.set(value);
    });

})



</script>

<style lang="scss" scoped>

</style>